<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>VueComponent</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    关于VueComponent：
      1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
      2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象。
      3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent
      4.关于this指向：
        （1）组件配置中
             data函数、methods中的函数、watch中的函数、computed中的函数，他们的this均是【VueComponent实例对象】
        （2）new Vue()配置中：
             data函数、methods中的函数、watch中的函数、computed中的函数，他们的this均是【Vue实例对象】
      5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）
        Vue的实例对象，以后简称vm

-->

<div id="root">
  <!--第三步：编写组件标签-->
  <school></school>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  //  第一步：创建school组件
  const school = Vue.extend({
    template: `
      <div>
      <h2>学校名称：{{ schoolName }}</h2>
      <h2>学校地址：{{ address }}</h2>
      <button @click="showSchoolName">点我提示学校名</button>
      </div>
    `,
    // el: '#root', 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
    data() {
      return {
        schoolName: '尚硅谷',
        address: '北京',
      }
    },
    methods:{
      showSchoolName(){
        alert(this.schoolName)
      }
    }
  })
  //  创建vm
  new Vue({
    el: '#root',
    // 第二步：注册组件（局部注册）
    components: {
     school,
    }
  })
</script>
</html>